<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>班次查询</title>

<!--日历样式-->
<link rel="stylesheet" href="css/calendar.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--可无视-->
<style>
.row {
	width: 70%;
	margin: 0 auto;
	margin-top: 20px;;
}
.row input {
	width: 50%;
	height: 35px;
	font-size: 16px;
}
#bcqk .textline{
	margin-top: 10px;
	font-size: 18px;
	
}
body {
	height: auto;
	font: 14px/150% microsoft yahei,tahoma;
	background: #ECE9E6;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #FFFFFF, #ECE9E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	}
.clear {
	clear: both
	}
.RadioStyle input {
	display: none
	}
.RadioStyle label {
	border: 1px solid #00a4ff;
	padding: 2px 10px 2px 5px;
	line-height: 28px;
	min-width: 25%;
	text-align: center;
	float: left;
	margin-left: 16.6%;
	margin-top: 10px;
	border-radius: 4px
	}
.RadioStyle input:checked + label {
	background: url(img/ico_checkon.svg) no-repeat right bottom;
	background-size: 21px 21px;
	color: #00a4ff
	}
</style>
<script src="js/jquery.min.js"></script>
</head>

<body>
<div class="row">
	<div style="margin-top: 15px;">
		<span style="font-size: 16px;color: red;">正确日期范围：2021-07-01之后</span>
	</div>
	<div style="margin-top: 10px;">
		<span style="font-size: 16px;color: red;">更新时间：2021-06-30</span>
	</div>
</div>
<div class="row">
	<div style="margin-top: 15px;">
		<span style="font-size: 18px;line-height: 30px;text-align: center;position: relative;top: 4px;">当前日期：</span>
		<input type="button" class="btn btn-info" id="choseday">
	</div>
</div>
<div class="row" id="bcqk">
	<div class="textline">甲班：<span id="resulta" style=""></span></div>
	<div class="textline">乙班：<span id="resultb" style=""></span></div>
	<div class="textline">丙班：<span id="resultc" style=""></span></div>
</div>

<div class="row" style="font-size: 18px;">
	<div style="margin-top: 15px;">
		<span>当前日期休息班次：</span><span id="outyour" style="font-weight: bold;"></span>
	</div>
</div>

<footer style="width:100%;position: absolute;bottom: 5px;text-align: center;">
	<div><li>&copy; Design: ZhuHao</li></div>
</footer>
<!--日期日历插件-->
<script src="js/calendar.js"></script>

<!--方法调用-->
<script>
	var myban="乙班";
	var starA="2021-08-10";
	var starB="2021-08-08";//
	var starC="2021-08-06";
	var classA,classB,classC;
	var data={};
	window.onload=function (){
		document.getElementById('choseday').value=getNowFormatDate();
		showresult();
		getcanreplace();
	}
$('#choseday').datePicker({
	okFunc: function (date) {
		showresult();
		getcanreplace();
	}
});
function showresult(){
	var ddd=document.getElementById("choseday").value;
	classA=getresult(ddd,starA);
	data["key"+getnewdata(classA)]="甲班";
	var resulta=getcbyn(classA);
	document.getElementById('resulta').innerText=resulta;
	classB=getresult(ddd,starB);
	data["key"+getnewdata(classB)]="乙班";
	var resultb=getcbyn(classB);
	document.getElementById('resultb').innerText=resultb;
	classC=getresult(ddd,starC);
	data["key"+getnewdata(classC)]="丙班";
	var resultc=getcbyn(classC);
	document.getElementById('resultc').innerText=resultc;
	
}
function getcanreplace(){
	document.getElementById("outyour").innerText=data["key3"];
}

function getnewdata(num){
	switch (num){
		case 0:
		case 1:
			return 1;
		case 2:
		case 3:
			return 2;
		case 4:
		case 5:
			return 3;
		default:
			return 0;
	}
	
}
function getcbyn(num){
	switch (num){
		case 0:
		case 1:
			return "早班（07:00~16:00）";
		case 2:
		case 3:
			return "中班（16:00~01:00）";
		case 4:
		case 5:
			return "休息";
		default:
			return "查询出错";
	}
}
function getresult(whichday,whichban){
	var days=dateDiff(whichban,whichday);
	var mmm=days%6;
	return mmm;
}
function dateDiff(firstDate,secondDate){
	var firstDate = new Date(firstDate);
	var secondDate = new Date(secondDate);
	var diff = Math.abs(firstDate.getTime() - secondDate.getTime())
	var result = parseInt(diff / (1000 * 60 * 60 * 24));
	return result;
}
function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    return currentdate;
}

</script>

</body>
</html>